<template>
  <uni-nav-bar title="加注订单" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <!-- 切换 -->
  <view class="package_sale datas" style="padding:15rpx;margin-bottom: 0px;">
    <view class="space-between">
      <uni-datetime-picker v-model="range" type="daterange" :border="false" :clear-icon="false" rangeSeparator="至"
        @change="change" />
      <uni-icons type="bars" size="30" color="#666" @click="filtrated()"></uni-icons>
    </view>
    <view class="space-between">
      <view class="center lis" style="font-size: 26rpx;">
        <view>加注量：{{amount?amount:'--'}}</view>
        <view>金额：{{money?money:'--'}}</view>
        <view>收益：{{shouyi?shouyi:'--'}}</view>
      </view>
      <view class="but" @click="relevance()">关联</view>
    </view>
  </view>
  <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
    :style="{ height: pageHeight + 'px' }">
    <!-- 加注订单 -->
    <FillOrderList :orderLists="orderLists"></FillOrderList>
    <Popu v-if="orderLists.length<1" :pageHeight="pageHeight" :text="'暂无加注订单'"></Popu>
  </scroll-view>
  <!-- 关联弹框 -->
  <Association ref="related" @submit="association"></Association>
  <!-- 筛选框 -->
  <Screen ref="preparation" @submit="submit"></Screen>
</template>

<script setup lang="ts">
  import { navBack } from '@/utils/navigator';
  import Popu from '@c/earthPushing/common/popu.vue';
  import { ref } from 'vue';
  import Association from '@c/earthPushing/bullet-box/association.vue';
  import Screen from '@c/earthPushing/bullet-box/screen.vue';
  import FillOrderList from '@c/earthPushing/list/fillOrderList.vue';
  import { format, subDays } from 'date-fns';
  import { getOrderFillingList } from '@/gql/earthPushing/order';
  import { toPublish } from '@mqtt';
  import { showLoading, errorToast, successToast } from '@/utils/prompt';
  import { getDriverID } from '@/stores/driverID';
  const staff_id = getDriverID();
  // data
  const now = new Date();
  let end = format(now, 'yyyy-MM-dd');
  const daysAgo = subDays(now, 6);
  let start = format(daysAgo, 'yyyy-MM-dd');
  const range = ref([start, end]);

  const related = ref(null)
  const preparation = ref(null)

  const money = ref('')
  const amount = ref('')
  const shouyi = ref('')
  const orderLists = ref([]);
  const isLoading = ref(false);
  const lastPage = ref(1);
  const currentPage = ref(1);
  const fill_status = ref(0)
  const pay_type = ref('')
  const pageHeight = ref();
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = res.windowHeight - 130;
    },
  });
  fillorder()
  function fillorder() {
    showLoading()
    isLoading.value = true;
    const payload = {
      query: getOrderFillingList,
      variables: {
        page: currentPage.value,
        staff_id,
        start,
        end,
        fill_status: fill_status.value,
        pay_type: pay_type.value
      },
    };
    toPublish(
      'ql/staff/getOrderFillingList',
      payload,
      (obj : any) => {
        const { getOrderFillingList } = obj.data;
        isLoading.value = false;
        orderLists.value = [...orderLists.value, ...getOrderFillingList.list];
        lastPage.value = getOrderFillingList.lastpage;
        money.value = getOrderFillingList.money
        amount.value = getOrderFillingList.amount
        shouyi.value = getOrderFillingList.shouyi
      },
    );
  }
  /**
   * 加载更多
   */
  function loadMore() {
    if (currentPage.value < lastPage.value) {
      currentPage.value++;
      fillorder();
    }
  }

  /**
   * 时间筛选数据信息
   */
  function change([sta, en]) {
    currentPage.value = 1;
    orderLists.value = [];
    start = sta;
    end = en;
    fillorder();
  }
  /**
   * 筛选
   */
  function submit(pay : string, status : string) {
    fill_status.value = status ? Number(status) : 0
    pay_type.value = pay ? pay : ''
    currentPage.value = 1;
    orderLists.value = [];
    fillorder();

  }
  // 关联
  function relevance() {
    related.value.open()
  }
  function association(num : string) {
    showLoading('');
    const payload = {
      staff_id,
      order_sn: num
    };
    toPublish('staff/addStaffFillingOrder', payload, (obj : any) => {
      uni.hideLoading();
      const { code, msg } = obj;
      if (code === 1) {
        currentPage.value = 1;
        orderLists.value = [];
        fillorder();
        successToast(msg)
      } else {
        errorToast(msg)
      }
    });
  }
  // 筛选
  function filtrated() {
    preparation.value.initFill()
  }
</script>

<style scoped lang="less">
  .but {
    padding: 0rpx 20rpx 3rpx;
    box-sizing: border-box;
    border: 1px solid #1890FF;
    border-radius: 6px;
    color: #1890FF;
    font-size: 26rpx;
  }

  .lis {
    view {
      margin: 0px 10rpx;
      color: #666;
    }
  }
</style>
<style>
  .datas>>>.uni-date__x-input {
    font-size: 30rpx !important;
  }

  .datas>>>.uni-date-x {
    font-size: 30rpx !important;
  }

  .datas>>>.uni-icons {
    font-size: 48rpx !important;
  }
</style>